<template>
    <div class="content">
        <div class="left">
            <div class="login-log">
                <img src="../assets/img/login_log.png">
            </div>
            <div class="login-web-name">
              {{ webName }}
            </div>
        </div>
        <div class="right">
            <div class="login-page-mark">
                系统登录
            </div>
            <div class="login-form">
                <div class="form-group">
                    <label>登陆名</label>
                    <input type="text" v-model="loginParams.userName"/>
                </div>
                <div class="form-group" style="margin-top: 30px">
                    <label>密码</label>
                    <input type="password" v-model="loginParams.password"/>
                </div>
                <div class="form-group form-btn" style="margin-top: 40px">
                    <button @click="login" class="login-btn">登陆</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup >
import {inject, ref, reactive, toRaw, onMounted} from 'vue';
    import {ElMessage} from 'element-plus'
    import {router} from "../router/index.ts";
    import {AXIOS_NAME, LOGIN_USER_NAME, TOKEN_NAME_KEY, TOKEN_VALUE_KEY} from '../constant/constant.ts';

    const webName = import.meta.env.VITE_WEB_NAME;
    const $axios = inject(AXIOS_NAME);

    let loginParams = reactive({
        "userName": "admin",
        "password": "admin"
    });

    async function login() {
        const params = toRaw(loginParams);
        const result = await $axios.post("/login/login", params).then(
            respone => {
              debugger;
                const data = respone.data;
                if(data.code != 1){
                    localStorage.setItem(TOKEN_VALUE_KEY,"");
                    ElMessage.info("登陆失败");
                    return;
                }
                localStorage.setItem(TOKEN_NAME_KEY,data.data.tokenName);
                localStorage.setItem(TOKEN_VALUE_KEY,data.data.tokenValue);
                localStorage.setItem(LOGIN_USER_NAME,data.data.userName);
                router.push("/");
            }).catch(error => {
                console.log(error);
            ElMessage.info("登陆失败"  );
        }).finally(() => {
        });
    }

    onMounted(() => {
      localStorage.removeItem(TOKEN_NAME_KEY);
      localStorage.removeItem(TOKEN_VALUE_KEY);
      localStorage.removeItem(LOGIN_USER_NAME);
    })
</script>

<style scoped>
    .login-btn {
        width: 100%;
        height: 43px;
        background-color: #409eff;
        border-radius: 10px;
        color: white;
        font-size: 15px;
        border: 1px solid #409eff;
    }

    .form-group {
        width: 100%;
        padding: 3px 0;
        border: #ecf5ff solid 1px;
        border-radius: 5px;
        background-color: #ecf5ff;
        height: 39px;
    }

    .form-btn {
        background-color: white;
        border: 0px;
    }

    .form-group label {
        color: #ccc;
        width: 80px;
        display: inline-block;
        text-align: right;
        padding-right: 20px;
        font-size: 15px;
    }

    .form-group input {
        text-align: left;
        border: 0px;
        background-color: transparent;
        height: 100%;
        width: calc(100% - 110px);
    }

    .form-group input:focus {
        color: #000; /* 被选中时的文本颜色 */
        outline: none; /* 去除默认的轮廓线 */
    }

    .login-form {
        height: 200px;
        padding: 60px;
    }

    .login-page-mark {
        width: 100%;
        font-size: 40px;
        color: #79bbff;
        margin-top: 100px;
        letter-spacing: 10px;
        display: flex;
        justify-content: center;
    }

    .login-web-name {
        width: 100%;
        height: 50px;
        font-size: 45px;
        text-align: center;
        line-height: 50px;
        color: white;
        font-weight: 600;
        margin-top: 20px;
        letter-spacing: 5px;
        margin-top: 50px;
    }

    .login-log {
        height: auto;
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 150px;
    }

    .content {
        width: 100%;
        height: 100vh;
        background-image: url("../assets/img/login_bg.png");
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-content: center;
    }

    .left {
        width: 28%;
        height: 700px;
        background-image: url("../assets/img/login_left.jpg");
        background-size: 100% 100%;
    }

    .right {
        width: 38%;
        height: 700px;
        background-color: white;
    }

    .login-log img {
        width: 60px;
    }
</style>